import {
	$
} from './library/jquery.js';
import cookie from './library/cookie.js';

let id = location.search.split('=')[1];

$.ajax({
	type: "get",
	url: "../../interface/getItem.php",
	data: {
		id: id
	},
	dataType: "json",
	success: function (res) {

		let pic = JSON.parse(res.picture); //获取图片src
		if (pic[0].src == 'images/product/p1-0.webp') {
			pic.shift();
		}

		let introduce = res.introduce.split('&'); //获取商品介绍

		let type = JSON.parse(res.type); //获取商品类型
		let color = type[0].color.split(','); //从类型中获取颜色
		let config = type[0].config.split(','); //从类型中获取配置


		let temp1 = '';
		for (let i = 0; i < pic.length; i++) {
			temp1 += `<img src="../${pic[i].src}" alt="">`
		}
		$('.s1-img-box,.s1-btn1').html(temp1);
		$('.s1-btn1>img').first().addClass('checked');
		$('.s1-btn1>img').on('click', function () {
			let i = $('.s1-btn1>img').index(this);
			$(this).addClass('checked').siblings().removeClass('checked');
			$('.s1-img-box').animate({
				'left': -imgWidth * i
			}, 500);
		})

		let temp2 = `
		OPPO ${res.title} ${color[0]} ${config[0]}
		`;
		$('.s1-r-h3').html(temp2);

		let temp3 = `
		<span>${introduce[0]}</span> ${introduce[1]}
		`;
		$('.s1-r-p1').html(temp3);

		$('.s1-r-link').html(introduce[2]);

		$('.s1-newPrice').html('￥' + type[0].price);

		let temp4 = '';
		for (let j = 0; j < color.length; j++) {
			temp4 += `<li><a href="javascript: ;"><span></span>${color[j]}</a></li>`;
		}
		$('.config-color').html(temp4);
		let temp5 = '';
		for (let k = 0; k < config.length; k++) {
			temp5 += `<li><a href="javascript: ;">${config[k]}</a></li>`;
		}
		$('.config-config').html(temp5);

		$('.config-color>li').eq(0).addClass('list-checked');
		$('.config-config>li').eq(0).addClass('list-checked');
		$('.config-list>li').on('click', function () {
			$(this).addClass('list-checked').siblings().removeClass('list-checked');
		})


		let xq = JSON.parse(res.xiangqing);
		let temp6 = '';
		for (let l = 0; l < xq.length; l++) {
			temp6 += `<img src="../${xq[l].src}" alt="">`;
		}
		$('.s2-img').html(temp6);

		$('.addpro').on('click', function () {

			let config_c = $('.config-config').children('.list-checked').text();

			let color_c = $('.config-color').children('.list-checked').text();
			let num_c = $('.num-show').text();
			addItem(res.id, type[0].price, num_c, config_c, color_c);
		})
	}
});


function addItem(id, price, num, config, color) {
	let shop = cookie.get('shop');

	let product = {
		id,
		price,
		num,
		config,
		color
	}

	// 判断当前cookie中是否有购物数据
	if (shop) { // 如果有数据 取出是一个字符串
		shop = JSON.parse(shop);

		// 添加之前先要判断数据中有没有该商品
		if (shop.some(el => el.id === id)) {
			let _index = shop.findIndex(elm => elm.id == id);
			let count = parseInt(shop[_index].num);
			count += parseInt(num);
			shop[_index].num = count;
		} else {
			shop.push(product);
		}


	} else { // 第一次没有数据的情况 创建一个新数据
		shop = [];
		shop.push(product);
	}

	cookie.set('shop', JSON.stringify(shop), 1);
}





let imgWidth = $('.s1-img').width();

let jjgWidth = $('.jjg-pro>ul>li').first().width();
let maxLeft = jjgWidth * ($('.jjg-pro>ul>li').length - 4);
let flag = false;
$('.control-l').on('click', function () {
	if (flag) {
		return;
	}
	let left = $('.jjg-pro>ul').position().left;
	if (left != 0) {
		flag = true;
		$('.jjg-pro>ul').animate({
			'left': left + jjgWidth
		}, 500, function () {
			return flag = false;
		})
		left = left + jjgWidth;
		if (left == 0) {
			$('.control-l').css({
				'background': ' url(../images/details/jiantou_left.png) no-repeat'
			});
			$('.control-r').css({
				'background': ' url(../images/details/jiantou_right_jihuo.png) no-repeat'
			});
		} else {
			$('.control-l').css({
				'background': ' url(../images/details/jiantou_left_jihuo.png) no-repeat'
			});
		}

	}
})
$('.control-r').on('click', function () {
	if (flag) {
		return;
	}
	let left = $('.jjg-pro>ul').position().left;
	if (left != -maxLeft) {
		flag = true;
		$('.jjg-pro>ul').animate({
			'left': left - jjgWidth
		}, 500, function () {
			return flag = false;
		})
		left = left - jjgWidth;
		if (left == -maxLeft) {
			$('.control-r').css({
				'background': ' url(../images/details/jiantou_right.png) no-repeat'
			});
			$('.control-l').css({
				'background': ' url(../images/details/jiantou_left_jihuo.png) no-repeat'
			});
		} else {
			$('.control-r').css({
				'background': ' url(../images/details/jiantou_right_jihuo.png) no-repeat'
			});
		}
	}
})

let proNum = Number($('.num-show').text());
if (proNum == 1) {
	$('.num-sub').attr('id', 'disable');
}
$('.num-sub').on('click', function () {
	if (proNum > 1) {
		proNum--;
		if (proNum == 1) {
			$('.num-sub').attr('id', 'disable');
			$('.num-add').attr('id', '');
		} else {
			$('.num-sub').attr('id', '');
		}
	}
	$('.num-show').text(proNum);
})
$('.num-add').on('click', function () {
	$('.num-sub').attr('id', '');
	if (proNum < 10) {
		proNum++;
		if (proNum == 10) {
			$('.num-add').attr('id', 'disable');
			$('.num-sub').attr('id', '');
		} else {
			$('.num-add').attr('id', '');
		}
	}
	$('.num-show').text(proNum);
})